<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>普惠商城-商城首页</title>
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/common.css">
    <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
    <style type="text/css">
        .float-nav {
            position: fixed;
            top: 0;
            left: 0;
        }
    </style>
</head>
<body>

<!-- 顶部导航条开始 -->
<div class="puhuishopping_common_titlelink" id="puhuishopping_common_titlelink">
    <!-- 导航条左部 -->
    <div class="centerbody">
        <div class="title_left">
            <span class="puhuishopping_common_city" id="puhuishopping_common_city">重庆</span><span
                class="puhuishopping_common_citychange" id="puhuishopping_common_citychange">[ 切换城市 ]</span>
            <!-- <div class='citylist' id='citylist'></div> -->
        </div>
        <!-- 导航条右部 -->
        <!-- 已登录 -->
        <!--<div class="title_right">-->
        <!--您好&nbsp;&nbsp;,&nbsp;<a href="普惠商城-商城首页-登录页面.html" class="puhuishopping_common_login" id="puhuishopping_common_login">请登录</a>-->
        <!--<a href="普惠商城-商城首页-注册页面.html" class="puhuishopping_common_hyzc">会员注册</a>-->
        <!--<a href="普惠商城-个人中心-订单中心-线上订单.html" class="puhuishopping_common_wddd">我的订单</a>-->
        <!--<a href="javascript:void(0);" class="puhuishopping_common_ydsc">移动商城</a>-->
        <!--<div style="clear: both"></div>-->
        <!--</div>-->
        <!-- 未登录 -->
        <div class="title_right">
            您好&nbsp;&nbsp;,&nbsp;<a href="普惠商城-个人中心.html" class="puhuishopping_common_login"
                                    id="puhuishopping_common_login">15023081894</a>
            <a href="#" class="puhuishopping_common_hyzc">[退出]</a>
            <a href="普惠商城-个人中心-订单中心-线上订单.html" class="puhuishopping_common_wddd">我的订单</a>
            <a href="javascript:void(0);" class="puhuishopping_common_ydsc">移动商城</a>
            <div style="clear: both"></div>
        </div>
    </div>
</div>
<!-- 顶部导航条结束 -->
<div class="TopNavBox">
    <!-- 顶部搜索栏部分开始 -->
    <div class="centerbody search">
        <a href="普惠商城-商城首页.html"><img src="images/普惠logo最终版.png" alt="" class="logo"></a>
        <div class="searchbox">
            <input type="text" class="searchtxt"><input type="button" class="searchbtn" value="搜索">
        </div>
        <input type="button" class="my_shoplist" id="my_shoplist" value="我的购物车">
        <input type="button" class="my_checklist" id="my_checklist"
               onclick="window.location.href='普惠商城-个人中心-订单中心-线上订单.html'" value="我的订单">
        <div style="clear: both"></div>
    </div>
    <!-- 顶部商品分类和一级菜单 -->
    <div class="centerbody bannerlist">
        <div class="listleft">
            <p class="ListType">商品分类</p>
            <ul class="listbox">
                <li><a href="#">家用电器</a></li>
                <li><a href="#">家用电器</a></li>
                <li><a href="#">家用电器</a></li>
                <li><a href="#">家用电器</a></li>
                <li><a href="#">家用电器</a></li>
                <li><a href="#">家用电器</a></li>
                <li><a href="#">家用电器</a></li>
                <li><a href="#">家用电器</a></li>

            </ul>
        </div>

        <div class="listright">
            <a href="javascript:void(0);">首页</a>
            <a href="javascript:void(0);">普惠特色</a>
            <a href="javascript:void(0);">服装美妆</a>
            <a href="javascript:void(0);">家电手机</a>
            <a href="javascript:void(0);">电脑数码</a>
            <a href="javascript:void(0);">食品生鲜</a>
            <a href="javascript:void(0);">母婴玩具</a>
        </div>
        <div style="clear: both"></div>
    </div>
</div>
<!-- 广告图滚动 -->
<div class="adbox">
    <div>
        <a href="javascript:vodi(0);" class="picbox"><img src="images/商城banner-3.jpg" alt="" ></a>
        <a href="javascript:vodi(0);" class="picbox"><img src="images/商城banner-2.jpg" alt="" ></a>
        <a href="javascript:vodi(0);" class="picbox"><img src="images/商城banner-3.jpg" alt="" ></a>
        <a href="javascript:vodi(0);" class="picbox"><img src="images/商城banner-2.jpg" alt="" ></a>

    </div>

    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>
<!-- 普惠特色 -->

<div class="centerbody phts louceng" id="1">
    <div class="phts_title">
        <span class="phts_title_line left"></span>
        <span>● 普惠特色 ●</span>
        <span class="phts_title_line right"></span>
        <div style="clear: both"></div>
    </div>
    <div class="phts_list">
        <img src="images/普惠首页_12.png" alt="" class="phts_list_1"/>
        <img src="images/普惠首页_14.png" alt="" class="phts_list_2"/>
        <img src="images/普惠首页_16.png" alt="" class="phts_list_3"/>
        <img src="images/普惠首页_18.png" alt="" class="phts_list_4"/>
        <img src="images/普惠首页_24.png" alt="" class="phts_list_5"/>
        <img src="images/普惠首页_26.png" alt="" class="phts_list_6"/>
        <img src="images/普惠首页_28.png" alt="" class="phts_list_7"/>
        <img src="images/普惠首页_30.png" alt="" class="phts_list_8"/>
        <div style="clear: both"></div>
    </div>
</div>
<!-- 商品展示区 -->
<div class="centerbody">
    <!-- 服装美妆 -->
    <div class="louceng" id="2">
        <div class="fzmz title">服装美妆</div>
        <div class="goodsbody-big">
            <div class="goods-left">
                <div class="goods-up">
                    <a class="goods-big" href="javascript:void(0);"><img src="images/普惠首页_40.png" alt=""></a>
                    <div class="goods-big-right">
                        <a class="goods-white border-right" href="javascript:void(0);"><img src="images/普惠首页_42.png" alt=""></a>
                        <a class="goods-white border-bottom" href="javascript:void(0);"><img src="images/普惠首页_44.png" alt=""></a>
                        <a class="goods-white border-top" href="javascript:void(0);"><img src="images/普惠首页_57.png" alt=""></a>
                        <a class="goods-white border-left" href="javascript:void(0);"><img src="images/普惠首页_58.png" alt=""></a>
                    </div>
                </div>
                <div>
                    <a href="javascript:void(0);" class="goods-down"><img src="images/普惠首页_67.png" alt=""></a>
                    <a href="javascript:void(0);" class="goods-down"><img src="images/普惠首页_69.png" alt=""></a>
                    <a href="javascript:void(0);" class="goods-down"><img src="images/普惠首页_71.png" alt=""></a>
                </div>
            </div>

            <div class="goods-middle"></div>
            <div class="goods-right">
                <div class="goods-up">
                    <a class="goods-big" href="javascript:void(0);"><img src="images/普惠首页_40.png" alt=""></a>
                    <div class="goods-big-right">
                        <a class="goods-white border-right" href="javascript:void(0);"><img src="images/普惠首页_42.png" alt=""></a>
                        <a class="goods-white border-bottom" href="javascript:void(0);"><img src="images/普惠首页_44.png" alt=""></a>
                        <a class="goods-white border-top" href="javascript:void(0);"><img src="images/普惠首页_57.png" alt=""></a>
                        <a class="goods-white border-left" href="javascript:void(0);"><img src="images/普惠首页_58.png" alt=""></a>
                    </div>
                </div>
                <div>
                    <a href="javascript:void(0);" class="goods-down"><img src="images/普惠首页_67.png" alt=""></a>
                    <a href="javascript:void(0);" class="goods-down"><img src="images/普惠首页_69.png" alt=""></a>
                    <a href="javascript:void(0);" class="goods-down"><img src="images/普惠首页_71.png" alt=""></a>
                </div>
            </div>
            <div style="clear:both;"></div>
        </div>
    </div>
    <!-- 家电手机 -->
    <div class="louceng" id="3">
        <div class="jdsj title">家电手机</div>
        <div class="goodsbody-big">
            <div class="goods-left">
                <div class="goods-up">
                    <a class="goods-big" href="javascript:void(0);"><img src="images/普惠首页_40.png" alt=""></a>
                    <div class="goods-big-right">
                        <a class="goods-white border-right" href="javascript:void(0);"><img src="images/普惠首页_42.png" alt=""></a>
                        <a class="goods-white border-bottom" href="javascript:void(0);"><img src="images/普惠首页_44.png" alt=""></a>
                        <a class="goods-white border-top" href="javascript:void(0);"><img src="images/普惠首页_57.png" alt=""></a>
                        <a class="goods-white border-left" href="javascript:void(0);"><img src="images/普惠首页_58.png" alt=""></a>
                    </div>
                </div>
                <div>
                    <a href="javascript:void(0);" class="goods-down"><img src="images/普惠首页_67.png" alt=""></a>
                    <a href="javascript:void(0);" class="goods-down"><img src="images/普惠首页_69.png" alt=""></a>
                    <a href="javascript:void(0);" class="goods-down"><img src="images/普惠首页_71.png" alt=""></a>
                </div>
            </div>

            <div class="goods-middle"></div>
            <div class="goods-right">
                <div class="goods-up">
                    <a class="goods-big" href="javascript:void(0);"><img src="images/普惠首页_40.png" alt=""></a>
                    <div class="goods-big-right">
                        <a class="goods-white border-right" href="javascript:void(0);"><img src="images/普惠首页_42.png" alt=""></a>
                        <a class="goods-white border-bottom" href="javascript:void(0);"><img src="images/普惠首页_44.png" alt=""></a>
                        <a class="goods-white border-top" href="javascript:void(0);"><img src="images/普惠首页_57.png" alt=""></a>
                        <a class="goods-white border-left" href="javascript:void(0);"><img src="images/普惠首页_58.png" alt=""></a>
                    </div>
                </div>
                <div>
                    <a href="javascript:void(0);" class="goods-down"><img src="images/普惠首页_67.png" alt=""></a>
                    <a href="javascript:void(0);" class="goods-down"><img src="images/普惠首页_69.png" alt=""></a>
                    <a href="javascript:void(0);" class="goods-down"><img src="images/普惠首页_71.png" alt=""></a>
                </div>
            </div>
            <div style="clear:both;"></div>
        </div>
    </div>
    <!-- 爱车、阅读、生活旅行 -->

    <!--<div style="margin-top: 20px;" class="louceng">-->

    <div style="float: left; margin-top: 20px;" class="louceng" id="4">
        <div class="ac title">爱车</div>
        <div class="goodsbody-small ac">
            <div class="goods-up">
                <a class="goods-big" href="javascript:void(0);"><img src="images/普惠首页_40.png" alt=""></a>
                <div class="goods-big-right small-right">
                    <a class="goods-white border-bottom" href="javascript:void(0);"><img src="images/普惠首页_57.png" alt=""></a>
                    <a class="goods-white" href="javascript:void(0);"><img src="images/普惠首页_58.png" alt=""></a>
                </div>
            </div>
            <div>
                <a href="javascript:void(0);" class="small-down-position"><img src="images/普惠首页_67.png" alt=""></a>
                <a href="javascript:void(0);" class="small-down-position"><img src="images/普惠首页_69.png" alt=""></a>
            </div>
        </div>
    </div>

    <div style="float: left; margin-top: 20px;">
        <div class="yd title">阅读</div>
        <div class="goodsbody-small yd">
            <div class="goods-up">
                <a class="goods-big" href="javascript:void(0);"><img src="images/普惠首页_40.png" alt=""></a>
                <div class="goods-big-right small-right">
                    <a class="goods-white border-bottom" href="javascript:void(0);"><img src="images/普惠首页_57.png" alt=""></a>
                    <a class="goods-white" href="javascript:void(0);"><img src="images/普惠首页_58.png" alt=""></a>
                </div>
            </div>
            <div>
                <a href="javascript:void(0);" class="small-down-position"><img src="images/普惠首页_67.png" alt=""></a>
                <a href="javascript:void(0);" class="small-down-position"><img src="images/普惠首页_69.png" alt=""></a>
            </div>
        </div>
    </div>
    <div style="float: left; margin-top: 20px;">
        <div class="shlx title">生活旅行</div>
        <div class="goodsbody-small shlx">
            <div class="goods-up">
                <a class="goods-big" href="javascript:void(0);"><img src="images/普惠首页_40.png" alt=""></a>
                <div class="goods-big-right small-right">
                    <a class="goods-white border-bottom" href="javascript:void(0);"><img src="images/普惠首页_57.png" alt=""></a>
                    <a class="goods-white" href="javascript:void(0);"><img src="images/普惠首页_58.png" alt=""></a>
                </div>
            </div>
            <div>
                <a href="javascript:void(0);" class="small-down-position"><img src="images/普惠首页_67.png" alt=""></a>
                <a href="javascript:void(0);" class="small-down-position" style="margin-right: 13px;"><img src="images/普惠首页_69.png" alt=""></a>
            </div>
        </div>
    </div>
    <div style="clear: both;"></div>

    <!-- 电脑数码 -->
    <div class="louceng" id="5">
        <div class="dnsm title">电脑数码</div>
        <div class="goodsbody-big">
            <div class="goods-left">
                <div class="goods-up">
                    <a class="goods-big" href="javascript:void(0);"><img src="images/普惠首页_40.png" alt=""></a>
                    <div class="goods-big-right">
                        <a class="goods-white border-right" href="javascript:void(0);"><img src="images/普惠首页_42.png" alt=""></a>
                        <a class="goods-white border-bottom" href="javascript:void(0);"><img src="images/普惠首页_44.png" alt=""></a>
                        <a class="goods-white border-top" href="javascript:void(0);"><img src="images/普惠首页_57.png" alt=""></a>
                        <a class="goods-white border-left" href="javascript:void(0);"><img src="images/普惠首页_58.png" alt=""></a>
                    </div>
                </div>
                <div>
                    <a href="javascript:void(0);" class="goods-down"><img src="images/普惠首页_67.png" alt=""></a>
                    <a href="javascript:void(0);" class="goods-down"><img src="images/普惠首页_69.png" alt=""></a>
                    <a href="javascript:void(0);" class="goods-down"><img src="images/普惠首页_71.png" alt=""></a>
                </div>
            </div>

            <div class="goods-middle"></div>
            <div class="goods-right">
                <div class="goods-up">
                    <a class="goods-big" href="javascript:void(0);"><img src="images/普惠首页_40.png" alt=""></a>
                    <div class="goods-big-right">
                        <a class="goods-white border-right" href="javascript:void(0);"><img src="images/普惠首页_42.png" alt=""></a>
                        <a class="goods-white border-bottom" href="javascript:void(0);"><img src="images/普惠首页_44.png" alt=""></a>
                        <a class="goods-white border-top" href="javascript:void(0);"><img src="images/普惠首页_57.png" alt=""></a>
                        <a class="goods-white border-left" href="javascript:void(0);"><img src="images/普惠首页_58.png" alt=""></a>
                    </div>
                </div>
                <div>
                    <a href="javascript:void(0);" class="goods-down"><img src="images/普惠首页_67.png" alt=""></a>
                    <a href="javascript:void(0);" class="goods-down"><img src="images/普惠首页_69.png" alt=""></a>
                    <a href="javascript:void(0);" class="goods-down"><img src="images/普惠首页_71.png" alt=""></a>
                </div>
            </div>
            <div style="clear:both;"></div>
        </div>
    </div>
    <!-- 食品生鲜 -->
    <div class="louceng" id="6">
        <div class="spsx title ">食品生鲜</div>
        <div class="goodsbody-big">
            <div class="goods-left">
                <div class="goods-up">
                    <a class="goods-big" href="javascript:void(0);"><img src="images/普惠首页_40.png" alt=""></a>
                    <div class="goods-big-right">
                        <a class="goods-white border-right" href="javascript:void(0);"><img src="images/普惠首页_42.png" alt=""></a>
                        <a class="goods-white border-bottom" href="javascript:void(0);"><img src="images/普惠首页_44.png" alt=""></a>
                        <a class="goods-white border-top" href="javascript:void(0);"><img src="images/普惠首页_57.png" alt=""></a>
                        <a class="goods-white border-left" href="javascript:void(0);"><img src="images/普惠首页_58.png" alt=""></a>
                    </div>
                </div>
                <div>
                    <a href="javascript:void(0);" class="goods-down"><img src="images/普惠首页_67.png" alt=""></a>
                    <a href="javascript:void(0);" class="goods-down"><img src="images/普惠首页_69.png" alt=""></a>
                    <a href="javascript:void(0);" class="goods-down"><img src="images/普惠首页_71.png" alt=""></a>
                </div>
            </div>

            <div class="goods-middle"></div>
            <div class="goods-right">
                <div class="goods-up">
                    <a class="goods-big spsxbigpic big1" href="javascript:void(0);"><img src="images/普惠首页_40.png" alt=""
                                                                      class="spsxbigpic"></a>
                    <div class="goods-big-right">
                        <a class="goods-big spsxbigpic big2" href="javascript:void(0);"><img src="images/普惠首页_40.png" alt=""
                                                                          class="spsxbigpic"></a>
                        <a class="goods-white border-bottom" href="javascript:void(0);"><img src="images/普惠首页_57.png" alt=""></a>
                        <a class="goods-white " href="javascript:void(0);"><img src="images/普惠首页_58.png" alt=""></a>
                    </div>
                </div>
                <div>
                    <a href="javascript:void(0);" class="goods-down"><img src="images/普惠首页_67.png" alt=""></a>
                    <a href="javascript:void(0);" class="goods-down"><img src="images/普惠首页_69.png" alt=""></a>
                    <a href="javascript:void(0);" class="goods-down"><img src="images/普惠首页_71.png" alt=""></a>
                </div>
            </div>
            <div style="clear:both;"></div>
        </div>
    </div>
    <!-- 母婴玩具 -->
    <div class="louceng" id="7">
        <div class="mywj title ">母婴玩具</div>
        <div class="goodsbody-big">
            <div class="goods-left">
                <div class="goods-up">
                    <a class="goods-big" href="javascript:void(0);"><img src="images/普惠首页_40.png" alt=""></a>
                    <div class="goods-big-right">
                        <a class="goods-white border-right" href="javascript:void(0);"><img src="images/普惠首页_42.png" alt=""></a>
                        <a class="goods-white border-bottom" href="javascript:void(0);"><img src="images/普惠首页_44.png" alt=""></a>
                        <a class="goods-white border-top" href="javascript:void(0);"><img src="images/普惠首页_57.png" alt=""></a>
                        <a class="goods-white border-left" href="javascript:void(0);"><img src="images/普惠首页_58.png" alt=""></a>
                    </div>
                </div>
                <div>
                    <a href="javascript:void(0);" class="goods-down"><img src="images/普惠首页_67.png" alt=""></a>
                    <a href="javascript:void(0);" class="goods-down"><img src="images/普惠首页_69.png" alt=""></a>
                    <a href="javascript:void(0);" class="goods-down"><img src="images/普惠首页_71.png" alt=""></a>
                </div>
            </div>

            <div class="goods-middle"></div>
            <div class="goods-right">
                <div class="goods-up">
                    <a class="goods-big" href="javascript:void(0);"><img src="images/普惠首页_40.png" alt=""></a>
                    <div class="goods-big-right">
                        <a class="goods-white border-right" href="javascript:void(0);"><img src="images/普惠首页_42.png" alt=""></a>
                        <a class="goods-white border-bottom" href="javascript:void(0);"><img src="images/普惠首页_44.png" alt=""></a>
                        <a class="goods-white border-top" href="javascript:void(0);"><img src="images/普惠首页_57.png" alt=""></a>
                        <a class="goods-white border-left" href="javascript:void(0);"><img src="images/普惠首页_58.png" alt=""></a>
                    </div>
                </div>
                <div>
                    <a href="javascript:void(0);" class="goods-down"><img src="images/普惠首页_67.png" alt=""></a>
                    <a href="javascript:void(0);" class="goods-down"><img src="images/普惠首页_69.png" alt=""></a>
                    <a href="javascript:void(0);" class="goods-down"><img src="images/普惠首页_71.png" alt=""></a>
                </div>
            </div>
            <div style="clear:both;"></div>
        </div>
    </div>
    <!-- 普惠商户 -->
    <div class="louceng" id="8">
        <div class="phsh title ">普惠商户</div>
        <div class="goodsbody-big phsh_list">
            <ul>
                <li>
                    <img src="images/phsh/6.jpg" alt="">
                    <p class="phsh_title">陈强家具城</p>
                    <p class="phsh_tel">联系电话：12654876411</p>
                    <p class="phsh_address">商户地址：重庆市江北区大石坝岔路口100号</p>
                </li>
                <li>
                    <img src="images/phsh/4.jpg" alt="">
                    <p class="phsh_title">陈强家具城</p>
                    <p class="phsh_tel">联系电话：12654876411</p>
                    <p class="phsh_address">商户地址：重庆市江北区大石坝岔路口100号商户地址：重庆市江北区大石坝岔路口100号商户地址：重庆市江北区大石坝岔路口100号</p>
                </li>
                <li>
                    <img src="images/phsh/5.jpg" alt="">
                    <p class="phsh_title">陈强家具城</p>
                    <p class="phsh_tel">联系电话：12654876411</p>
                    <p class="phsh_address">商户地址：重庆市江北区大石坝岔路口100号商户地址：重庆市江北区大石坝岔路口100号商户地址：重庆市江北区大石坝岔路口100号</p>
                </li>
                <li>
                    <img src="images/phsh/11.jpg" alt="">
                    <p class="phsh_title">陈强家具城</p>
                    <p class="phsh_tel">联系电话：12654876411</p>
                    <p class="phsh_address">商户地址：重庆市江北区大石坝岔路口100号商户地址：重庆市江北区大石坝岔路口100号商户地址：重庆市江北区大石坝岔路口100号</p>
                </li>
                <li>
                    <img src="images/phsh/1421049918154.jpg" alt="">
                    <p class="phsh_title">陈强家具城</p>
                    <p class="phsh_tel">联系电话：12654876411</p>
                    <p class="phsh_address">商户地址：重庆市江北区大石坝岔路口100号商户地址：重庆市江北区大石坝岔路口100号商户地址：重庆市江北区大石坝岔路口100号</p>
                </li>
                <li>
                    <img src="images/phsh/20150318121134728.jpg" alt="">
                    <p class="phsh_title">陈强家具城</p>
                    <p class="phsh_tel">联系电话：12654876411</p>
                    <p class="phsh_address">商户地址：重庆市江北区大石坝岔路口100号商户地址：重庆市江北区大石坝岔路口100号商户地址：重庆市江北区大石坝岔路口100号</p>
                </li>
                <li>
                    <img src="images/phsh/20160727141835513551.jpg" alt="">
                    <p class="phsh_title">陈强家具城</p>
                    <p class="phsh_tel">联系电话：12654876411</p>
                    <p class="phsh_address">商户地址：重庆市江北区大石坝岔路口100号商户地址：重庆市江北区大石坝岔路口100号商户地址：重庆市江北区大石坝岔路口100号</p>
                </li>
                <li>
                    <img src="images/phsh/巴黎花店.jpg" alt="">
                    <p class="phsh_title">陈强家具城</p>
                    <p class="phsh_tel">联系电话：12654876411</p>
                    <p class="phsh_address">商户地址：重庆市江北区大石坝岔路口100号商户地址：重庆市江北区大石坝岔路口100号商户地址：重庆市江北区大石坝岔路口100号</p>
                </li>
            </ul>
        </div>
    </div>
</div>
<!-- 浏览记录 -->
<div class="centerbody lljl">
    <div class="lljl_title">
        <span class="lljl_title_line left"></span>
        <span>● 浏览记录 ●</span>
        <span class="lljl_title_line right"></span>
        <div style="clear: both"></div>
    </div>

</div>
<div class="centerbody lljl-body">
    <li class="lljl-box">
        <img src="images/浏览记录-样图.png" alt="" class="lljl_pic">
        <span class="lljl_detail">小米（MI） 小米手环2代 心率监测 智能运动跑步计步器 男女防</span><span class="lljl_price">¥199</span>
        <input type="button" value="加入购物车" class="lljl_addbtn">
    </li>
    <li class="lljl-box"><img src="images/浏览记录-样图.png" alt="" class="lljl_pic">
        <span class="lljl_detail">小米（MI） 小米手环2代 心率监测 智能运动跑步计步器 男女防</span><span class="lljl_price">¥199</span>
        <input type="button" value="加入购物车" class="lljl_addbtn"></li>
    <li class="lljl-box"><img src="images/浏览记录-样图.png" alt="" class="lljl_pic">
        <span class="lljl_detail">小米（MI） 小米手环2代 心率监测 智能运动跑步计步器 男女防</span><span class="lljl_price">¥199</span>
        <input type="button" value="加入购物车" class="lljl_addbtn"></li>
    <li class="lljl-box"><img src="images/浏览记录-样图.png" alt="" class="lljl_pic">
        <span class="lljl_detail">小米（MI） 小米手环2代 心率监测 智能运动跑步计步器 男女防</span><span class="lljl_price">¥199</span>
        <input type="button" value="加入购物车" class="lljl_addbtn"></li>
    <li class="lljl-box"><img src="images/浏览记录-样图.png" alt="" class="lljl_pic">
        <span class="lljl_detail">小米（MI） 小米手环2代 心率监测 智能运动跑步计步器 男女防</span><span class="lljl_price">¥199</span>
        <input type="button" value="加入购物车" class="lljl_addbtn"></li>
    <li class="lljl-box"><img src="images/浏览记录-样图.png" alt="" class="lljl_pic">
        <span class="lljl_detail">小米（MI） 小米手环2代 心率监测 智能运动跑步计步器 男女防</span><span class="lljl_price">¥199</span>
        <input type="button" value="加入购物车" class="lljl_addbtn"></li>
    <li class="lljl-box"><img src="images/浏览记录-样图.png" alt="" class="lljl_pic">
        <span class="lljl_detail">小米（MI） 小米手环2代 心率监测 智能运动跑步计步器 男女防</span><span class="lljl_price">¥199</span>
        <input type="button" value="加入购物车" class="lljl_addbtn"></li>
    <li class="lljl-box"><img src="images/浏览记录-样图.png" alt="" class="lljl_pic">
        <span class="lljl_detail">小米（MI） 小米手环2代 心率监测 智能运动跑步计步器 男女防</span><span class="lljl_price">¥199</span>
        <input type="button" value="加入购物车" class="lljl_addbtn"></li>
    <li class="lljl-box"><img src="images/浏览记录-样图.png" alt="" class="lljl_pic">
        <span class="lljl_detail">小米（MI） 小米手环2代 心率监测 智能运动跑步计步器 男女防</span><span class="lljl_price">¥199</span>
        <input type="button" value="加入购物车" class="lljl_addbtn"></li>
    <li class="lljl-box"><img src="images/浏览记录-样图.png" alt="" class="lljl_pic">
        <span class="lljl_detail">小米（MI） 小米手环2代 心率监测 智能运动跑步计步器 男女防</span><span class="lljl_price">¥199</span>
        <input type="button" value="加入购物车" class="lljl_addbtn"></li>
    <li class="lljl-box"><img src="images/浏览记录-样图.png" alt="" class="lljl_pic">
        <span class="lljl_detail">小米（MI） 小米手环2代 心率监测 智能运动跑步计步器 男女防</span><span class="lljl_price">¥199</span>
        <input type="button" value="加入购物车" class="lljl_addbtn"></li>
    <li class="lljl-box"><img src="images/浏览记录-样图.png" alt="" class="lljl_pic">
        <span class="lljl_detail">小米（MI） 小米手环2代 心率监测 智能运动跑步计步器 男女防</span><span class="lljl_price">¥199</span>
        <input type="button" value="加入购物车" class="lljl_addbtn"></li>
    <li class="lljl-box"><img src="images/浏览记录-样图.png" alt="" class="lljl_pic">
        <span class="lljl_detail">小米（MI） 小米手环2代 心率监测 智能运动跑步计步器 男女防</span><span class="lljl_price">¥199</span>
        <input type="button" value="加入购物车" class="lljl_addbtn"></li>
    <li class="lljl-box"><img src="images/浏览记录-样图.png" alt="" class="lljl_pic">
        <span class="lljl_detail">小米（MI） 小米手环2代 心率监测 智能运动跑步计步器 男女防</span><span class="lljl_price">¥199</span>
        <input type="button" value="加入购物车" class="lljl_addbtn"></li>
    <li class="lljl-box"><img src="images/浏览记录-样图.png" alt="" class="lljl_pic">
        <span class="lljl_detail">小米（MI） 小米手环2代 心率监测 智能运动跑步计步器 男女防</span><span class="lljl_price">¥199</span>
        <input type="button" value="加入购物车" class="lljl_addbtn"></li>
</div>
<!-- 页面底部 -->
<div class="foot-banner">
    <div class="mod_help_list">
        <div class="mod_help_nav">
            <span class="mod_help_nav_tit">帮助中心</span>
            <ul class="mod_help_nav_con">
                <li><a href="javascript:void(0);" target="_blank" clstag="">购物中心</a></li>
                <li><a href="javascript:void(0);" target="_blank" clstag="">配送中心</a></li>
                <li><a href="javascript:void(0);" target="_blank" clstag="">支付中心</a></li>
                <li><a href="javascript:void(0);" target="_blank" clstag="">常见问题</a></li>
            </ul>
        </div>
        <div class="mod_help_nav">
            <span class="mod_help_nav_tit">售后服务</span>
            <ul class="mod_help_nav_con">
                <li><a href="javascript:void(0);" target="_blank" clstag="">退换货政策</a></li>
                <li><a href="javascript:void(0);" target="_blank" clstag="">退换货流程</a></li>
            </ul>
        </div>
        <div class="mod_help_nav">
            <span class="mod_help_nav_tit">关于我们</span>
            <ul class="mod_help_nav_con">
                <li><a href="javascript:void(0);" target="_blank" clstag="">公司介绍</a></li>
                <li><a href="javascript:void(0);" target="_blank" clstag="">普惠商城简介</a></li>
                <li><a href="javascript:void(0);" target="_blank" clstag="">联系客服</a></li>
            </ul>
        </div>
        <div class="mod_help_nav">
            <span class="mod_help_nav_tit">支付方式</span>
            <ul class="mod_help_nav_con">
                <li><a href="javascript:void(0);" target="_blank" clstag="">微信支付</a></li>
                <li><a href="javascript:void(0);" target="_blank" clstag="">支付宝支付</a></li>

            </ul>
        </div>
    </div>
    <div class="copyright">
        <p>©2016北京普惠联盟商贸有限公司 puhui315.com 京ICP证070791号|京ICP备10211739号|电子公告服务规则</p>
        <p>电子商务经营许可证(京)字第03889号</p>
        <p>京公网安备11010502025545号</p>
        <p style="height: 34px;width:350px;margin:17px auto 25px">
            <a href="javascript:void(0);" class="outlink link-space"><img src="images/foot-1.png" alt=""></a>
            <a href="javascript:void(0);" class="outlink link-space"><img src="images/foot-2.png" alt=""></a>
            <a href="javascript:void(0);" class="outlink"><img src="images/foot-3.png" alt=""></a>
        </p>
    </div>

</div>
<!-- 浮动导航栏 -->
<div class="float-nav">
    <ul>
        <li><a>本地特色</a></li>
        <li><a>服装美妆</a></li>
        <li><a>家电手机</a></li>
        <li><a>汽车阅读</a></li>
        <li><a>电脑数码</a></li>
        <li><a>食品生鲜</a></li>
        <li><a>母婴玩具</a></li>
        <li><a>普惠商户</a></li>

    </ul>
    <a href="#" class="back_top"><img src="images/形状-999-拷贝.png" alt="" class=""></a>

</div>
</body>
<script th:inline="javascript">

    var time = null;
    var autonum = 0;
    $(function () {

        $('.picbox').eq(0).css({
            opacity: 1,
            zIndex: 1,
        });
        $('.adbox').find('li').eq(0).css('background', '#CE5343');
        // 大图滚动代码↓↓
        clock();
        function moveFun() {
            $('.picbox').eq(autonum).stop(true, false).animate({
                opacity: 1,
                zIndex: 1
            }, 1000);
            $('.picbox').eq(autonum).siblings().stop(true, false).animate({
                opacity: 0,
                zIndex: 0
            }, 1000);

            $('.adbox').find('li').eq(autonum).delay(1000).css('background', '#CE5343');
            $('.adbox').find('li').eq(autonum).siblings().css('background', '#DFDFDF');
            autoNum();
        }

        function autoNum() {
            autonum++;
            if (autonum > $('.adbox').find('li').length) {

                autonum = 0;
            }
            return autonum;
        }

        function clock() {
            time = setInterval(moveFun, 5000);
        }

        $('.adbox').find('li').hover(function () {
            var num = $(this).index();
            clearInterval(time);
            $(this).css({background: '#CE5343'});
            $(this).siblings().css({background: '#DFDFDF'});

            $('.picbox').eq(num).stop(true, false).animate({
                opacity: 1,
                zIndex: 1
            }, 1000);
            $('.picbox').eq(num).siblings().stop(true, false).animate({
                opacity: 0,
                zIndex: 0
            }, 1000);
        }, function () {
            $(this).css({background: 'red'});
            $(this).siblings().css({background: '#DFDFDF'})
            autonum = $(this).index();
        })
        $('#box').hover(function () {
            clearInterval(time);

        }, function () {
            clock();
        })

        // $('#left').click(function(){
        // 			--autonum;
        // 			if(autonum<0){
        // 				autonum=$('.adbox').find('li').length;
        // 			}
        // 			$('.picbox').eq(autonum-1).stop(true,false).animate({
        // 				opacity:1,
        // 				zIndex:1
        // 			},1000);
        // 			$('.picbox').eq(autonum-1).siblings().stop(true,false).animate({
        // 			opacity:0,
        // 			zIndex:0
        // 			},1000);
        // 			$('.adbox').find('li').eq(autonum-1).css({background:'red'});
        // 			$('.adbox').find('li').eq(autonum-1).siblings().css({background:'#DFDFDF'})

        // })
        // $('#right').click(function(){
        // 			++autonum;
        // 			if(autonum==$('.adbox').find('li').length){
        // 				autonum=0;
        // 			}
        // 			$('.picbox').eq(autonum-1).stop(true,false).animate({
        // 				opacity:1,
        // 				zIndex:1
        // 			},1000);
        // 			$('.picbox').eq(autonum-1).siblings().stop(true,false).animate({
        // 			opacity:0,
        // 			zIndex:0
        // 			},1000);
        // 			$('.adbox').find('li').eq(autonum-1).css({background:'red'});
        // 			$('.adbox').find('li').eq(autonum-1).siblings().css({background:'#DFDFDF'})

        // })
        var top = ($(window).height() - $('.float-nav').height()) / 2;
        var left = ($('.centerbody')[0].offsetLeft - $('.float-nav').width() - 30);


        $('.float-nav').css({
            'top': top + 'px',
            'left': left + 'px'
        });
        $(window).resize(function () {

            if ($(this).width() >= 1901) {

                $('body').css('overflow-x', 'hidden');
                var top = ($(window).height() - $('.float-nav').height()) / 2;
                var left = ($('.centerbody')[0].offsetLeft - $('.float-nav').width() - 30);
                $('.float-nav').css({
                    'top': top + 'px',
                    'left': left + 'px'
                });
            }
            else if ($(this).width() < 1220) {

                $('body').css('overflow-x', 'auto');
                var top = ($(window).height() - $('.float-nav').height()) / 2;
                var left = ($('.centerbody')[0].offsetLeft - $('.float-nav').width() + 100);
                $('.float-nav').css({
                    'top': top + 'px',
                    'left': left + 'px'
                });
            } else {

                $('body').css('overflow-x', 'auto');
                var top = ($(window).height() - $('.float-nav').height()) / 2;
                var left = ($('.centerbody')[0].offsetLeft - $('.float-nav').width() - 30);
                $('.float-nav').css({
                    'top': top + 'px',
                    'left': left + 'px'
                });
            }
        })
        $('.float-nav').css('display', 'none');
        $(window).scroll(function () {

            if ($(this).scrollTop() > 400) {
//			        本地特色显示和导航栏默认显示设置
                $('.float-nav').fadeIn(100);
                $('.float-nav').find('li').removeClass('active');
                $('.float-nav').find('li').eq(0).addClass('active');
//                    本地特色后楼层显示，随鼠标滑动改变
                if ($(this).scrollTop() > 891) {
                    $('.louceng').each(function () {
                        if ($(window).height() + $(window).scrollTop() - $(this).offset().top > $(window).height() / 2) {
                            $('.float-nav').find('li').removeClass('active');
                            $('.float-nav').find('li').eq($(this).attr('id') - 1).addClass('active');


                        }
                    })
                }
            }
            else {
                $('.float-nav').fadeOut(600);
            }
        })
        $('.float-nav').find('li').click(function () {
            if ($(this).index() == 0) {
                $('body,html').animate({"scrollTop": 450}, 500);
            } else if ($(this).index() == 7) {
                var t = $('.louceng').eq(7).offset().top - 100;
                $('body,html').animate({"scrollTop": t}, 500);
                $(this).addClass('active').siblings().removeClass('active');
            }
            else {
                var t = $('.louceng').eq($(this).index() + 1).offset().top - $('.phts').offset().top - 100;
                $('body,html').animate({"scrollTop": t}, 500);
                $(this).addClass('active').siblings().removeClass('active');
            }

        });
        $('.back_top').click(function () {
            $('body,html').animate({"scrollTop": 0}, 500)
        })


    })
</script>

</html>